<template>
  <header>
    <div class="header-title">
      <div class="logo"></div>
      <h2>重点人员管控系统</h2>
    </div>
    <div class="header-user">
      <div class="user-img">
        <img src="" alt="">
      </div>
      <div class="user-text">
        <p class="user-name">admin</p>
        <p class="user-exit">欢迎您<i class="btn-exit el-icon-switch-button"></i></p>
      </div>
    </div>
    <nav class="nav-wrapper">
      <ul class="nav-list">
        <li class="nav"></li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../assets/style/_mixin.styl"

header{
  position fixed
  top 0
  left 0
  width 100%
  height 60px
  line-height 60px
  font-size 0
  background url('../assets/img/header-bg.png') no-repeat center
  background-size 100% 100%
}
.header-title{
  display inline-block
  .logo{
    display inline-block
    width 40px
    height 42px
    background url('../assets/img/logo.png') no-repeat center
    margin 0 10px
    vertical-align middle
  }
  h2{
    display inline-block
    font-size 26px
    color #ffffff
    vertical-align middle
  }
} 
.header-user{
  position absolute
  top 0
  right 2%
  font-size 0
  .user-img{
    display inline-block
    width 45px
    height 45px
    border-radius 50%
    background-color #001963
    overflow hidden
    vertical-align middle
    img{
      width 100%
    }
  }
  .user-text{
    display inline-block
    font-size 0
    line-height 1
    margin-left 10px
    vertical-align middle
    .user-name{
      line-height 20px
      font-size 14px
      color #ffffff
    }
    .user-exit{
      line-height 20px
      font-size 10px
      color #ffffff
    }
  }
}
.nav-wrapper{
  position absolute 
  top (14/60) * 100%
  left (316/1900) * 100%
  width ((1900 - 316 - 160) / 1900) * 100%
  height (46/60) * 100%
  .nav-list{
    
  }
}

@media screen and (max-width: 1600px) {
  .header-title{
    .logo{
      width 38px
      height 40px
    }
    h2{
      font-size 22px
    }
  }
  .header-user{
    right 1.5%
    .user-img{
      width 40px
      height 40px
    }
  }
}
@media screen and (max-width: 1400px) {
  .header-title{
    .logo{
      width 38px
      height 40px
      background-size 100% 100%
    }
    h2{
      font-size 18px
    }
  }
  .header-user{
    right 1%
    .user-img{
      width 40px
      height 40px
    }
  }
}
@media screen and (max-height: 900px) {
  header{
    height 50px
    line-height 50px
  }
}
@media screen and (max-height: 768px) {
  header{
    height 45px
    line-height 45px
  }
  .header-title{
    .logo{
      width 35px
      height 35px
      background-size 100% 100%
    }
  }
  .header-user{
    .user-img{
      width 36px
      height 36px
    }
    .user-text{
      .user-name, .user-exit{
        line-height 15px
      }
    }
  }
}
</style>